<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>展示所有食物页面</title>
        <script type="text/javascript" src="/Food-web/js/vue-2.6.12.js"></script>
        <script type="text/javascript" src="/Food-web/js/vue-router-3.4.9.js"></script>
        <script type="text/javascript" src="/Food-web/js/qs-6.9.4.js"></script>
        <script type="text/javascript" src="/Food-web/js/axios-0.21.0.js"></script>
    </head>
    <body>
        <div id="app">
            <table align="center">
                <tr>
                    <td>
                        <router-link to="/food/show"><button>查询</button></router-link>
                        <router-link to="/food/insertFood"><button>添加</button></router-link>
                        <br>
                        <router-view></router-view>
                    </td>
                </tr>
            </table>
        </div>
        <template id="food-table">
            <div>
                <table align="center" border="1px">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>价格</th>
                            <th>描述</th>
                            <th>热量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="f in foods" :key="f.foodId">
                            <td>{{f.foodId}}</td>
                            <td>{{f.foodName}}</td>
                            <td>{{f.price}}</td>
                            <td>{{f.desc}}</td>
                            <td>{{f.calorie}}</td>
                            <td>
                                <button @click="deleteFood(f.foodId)">删除</button>
                                <!--动态生成地址并拼接形参-->
                                <router-link :to="{path:'/food/updateFood',query:{foodId:f.foodId}}"><button>更新</button></router-link>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table align="center">
                    <tr>
                        <td>
                            <p>
                                <a href="" v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                                    <button style="...">
                                        {{page}}
                                    </button>
                                </a>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </template>
        <!--添加商品界面-->
        <template id="add-form">
            <form action="" @submit.prevent="add">
                名称: <input type="text" v-model="food.foodName"> <br>
                价格： <input type="text" v-model="food.price"> <br>
                描述: <input type="text" v-model="food.desc"> <br>
                热量: <input type="text" v-model="food.calorie"> <br>
                <input type="submit" value="添加">
            </form>
        </template>
        <template id="update-form">
            <form action="" @submit.prevent="update">
                <input type="hidden" v-model="food.foodId">
                名称: <input type="text" v-model="food.foodName"> <br>
                价格： <input type="text" v-model="food.price"> <br>
                描述: <input type="text" v-model="food.desc"> <br>
                热量: <input type="text" v-model="food.calorie"> <br>
                <input type="submit" value="更新">
            </form>
        </template>
    <script>
        //修改食物信息
        const updateForm = {
            template:"#update-form",
            data(){
                return{
                    food:{}
                }
            },
            created() {
                axios.get("/Food-web/food/selectFoodById",{
                    params:{
                        foodId:this.$route.query.foodId
                    }
                }).then(resp=>{
                    console.log(resp);
                    this.food = resp.data.food;
                    console.log(this.food);
                }).catch((error)=>{
                    console.log(error);
                })
            },
            methods:{
                update(){
                    axios.post("/Food-web/food/updateFood",Qs.stringify({food:this.food},{allowDots:true}))
                    .then(resp=>{
                        if(resp.data.status == "success"){
                            alert("修改成功");
                            this.$router.push("/food/show");
                        }else{
                            alert("修改失败");
                        }
                    }).catch((error)=>{
                        console.log(error);
                    })
                }
            }
        }
        //添加食物信息
        const addForm = {
            template: "#add-form",
            data(){
                return{
                    food:{}
                }
            },
            methods: {
                add(){
                    axios.post("/Food-web/food/insertFood", Qs.stringify({food:this.food},{allowDots:true}))
                        .then(resp=>{
                            console.log("添加"+resp);
                            if(resp.data.status == "success"){
                                console.log("进入方法中");
                                alert("添加成功");
                                this.$router.push("/food/show");
                            }else{
                                console.log("添加失败");
                                alert("添加失败");
                            }
                        }).catch((error)=>{//处理异常
                        console.log(error);
                    })
                }
            }
        }
        const foodTable ={
            template:"#food-table",
            data(){
                return{
                    foods:[],
                    pages:[]
                }
            },
            created(){
                this.handleAClick(1);
            },
            methods:{
                // 展示所有食物信息
                handleAClick(i) {
                    axios.get("/Food-web/food/show",{
                        params:{
                            pageNum:i,
                            pageSize:3
                        }
                    }).then(resp=>{
                        let data = resp.data;
                        console.log(data);
                        this.foods = data.foods;
                        console.log(this.foods);
                        this.pages = data.pages;
                        console.log(this.pages);
                    }).catch((error)=>{
                        console.log(error);
                    })
                },
                //删除食物信息
                deleteFood: function (foodId) {
                    let isDelete = confirm("确定删除吗？");
                    if(!isDelete){
                        return;
                    }
                    axios.get("/Food-web/food/deleteFood",{
                        params: {
                            foodId:foodId
                        }
                    }).then(resp=>{
                        console.log(resp);
                        if (resp.data.status == "success"){
                            alert("删除成功");
                            this.handleAClick(1);
                        }else{
                            alert("删除失败");
                        }
                    }).catch((error)=>{//处理异常
                        console.log(error);
                    })
                }
            }
        }
        //定义路由规则
        const router = new VueRouter({
            routes: [
                {path:"/food/show", component:foodTable},
                {path:"/food/insertFood", component: addForm},
                {path:"/food/updateFood", component: updateForm}
            ]
        })
        const vm = new Vue({
            el:"#app",
            router
        })
    </script>
    </body>
</html>